<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="../lib/three/three.js"></script>
</head>

<body>

</body>

</html>

<script>
  // 创建场景
  const scene = new THREE.Scene();

  // 创建相机
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
  // 设置相机的位置
  camera.position.set(0, 0, 20)

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器的大小
  renderer.setSize(window.innerWidth, window.innerHeight);

  // 将渲染器添加到页面中
  document.body.appendChild(renderer.domElement);

  // 定义立方体
  const cubeGeometry = new THREE.BoxGeometry(2, 2, 2); // 参数分别是长 宽 高

  // 创建材质
  const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00, wireframe: false }); // wireframe: false 表示不使用线框模式

  // 创建立方题
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

  // 将网格添加到场景中
  scene.add(cube);

  // 添加一个球体
  const sphereGeometry = new THREE.SphereGeometry(1, 10, 10); // 参数分别是半径，经度上的分段数，纬度上的分段数
  // MeshBasicMaterial: 基础材质，不受光照影响, MeshLambertMaterial: 漫反射材质，受光照影响
  const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000, wireframe: false });
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

  // 设置球体的位置
  sphere.position.set(4, 4, 0); // 参数分别是 x y z

  scene.add(sphere);

  // 添加一个平面，作为阴影的接收者
  const planeGeometry = new THREE.PlaneGeometry(20, 30);
  const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x999999 });
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);

  // 设置平面的位置
  plane.rotateZ(20);
  plane.position.z = -10;
  plane.position.x = 3;

  scene.add(plane);

  // 添加灯光
  const spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-10, 10, 90);
  scene.add(spotLight);

  // 开启阴影投射
  cube.castShadow = true;
  sphere.castShadow = true;
  // 开启阴影接收
  plane.receiveShadow = true;
  // 设置灯光的阴影
  spotLight.castShadow = true; 
  // 渲染器开启阴影支持
  renderer.shadowMapEnabled = true;

  // 动画循环
  function animate() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
  }
  animate();
</script>